<template>
  <div class="app-container">
    <app-container>
      <el-col :span="24" >
        <h3 class="title-center,grid-content bg-purple">抵质押物出库</h3>
      </el-col>
      <el-col :span="24" >
        <generate-form ref="generateForm" :data="jsonData_F" :remote="remoteFuncs" :value="editData" />
        <div class="generate-block">
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button type="primary">重置</el-button>
          <el-button type="primary">取消</el-button>
        </div>
      </el-col>
    </app-container>
  </div>
</template>

<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      activeName: 'first',
      jsonData_F: {
        list: [
          {
            type: 'input',
            name: '抵质押物编号',
            icon: 'regular/keyboard',
            options: {
              width: '26%',
              defaultValue: 'L00980010023',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: false,
              clearable: false,
              remoteFunc: 'func_1542877562000_87505'
            },
            key: '1542877562000_87505',
            model: 'input_1542877562000_87505',
            rules: [
              {
                type: 'string',
                message: '单行文本格式不正确'
              }
            ]
          },
          {
            type: 'input',
            name: '抵质押物名称',
            icon: 'regular/keyboard',
            options: {
              width: '26%',
              defaultValue: 'XXXXX贴现票据',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: true,
              clearable: false,
              remoteFunc: 'func_1542877570000_3437'
            },
            key: '1542877570000_3437',
            model: 'input_1542877570000_3437',
            rules: []
          },
          {
            type: 'input',
            name: '公司代码',
            icon: 'regular/keyboard',
            options: {
              width: '26%',
              defaultValue: '1001',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: true,
              clearable: false,
              remoteFunc: 'func_1542877579000_98829'
            },
            key: '1542877579000_98829',
            model: 'input_1542877579000_98829',
            rules: []
          },
          {
            type: 'input',
            name: '公司名称',
            icon: 'regular/keyboard',
            options: {
              width: '30%',
              defaultValue: '中兴（沈阳）金融科技有限公司',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: true,
              clearable: false,
              remoteFunc: 'func_1542877581000_73434'
            },
            key: '1542877581000_73434',
            model: 'input_1542877581000_73434',
            rules: []
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 8,
                list: [
                  {
                    type: 'select',
                    name: '货币代码',
                    icon: 'regular/caret-square-down',
                    options: {
                      defaultValue: 'CNY人民币',
                      multiple: false,
                      disabled: true,
                      clearable: false,
                      placeholder: '',
                      required: false,
                      showLabel: false,
                      width: '100%',
                      options: [
                        {
                          value: 'CNY人民币'
                        },
                        {
                          value: 'USD美元'
                        },
                        {
                          value: 'EUR欧元'
                        }
                      ],
                      remote: false,
                      remoteOptions: [],
                      props: {
                        value: 'value',
                        label: 'label'
                      },
                      remoteFunc: 'func_1542877599000_31159'
                    },
                    key: '1542877599000_31159',
                    model: 'select_1542877599000_31159',
                    rules: []
                  }
                ]
              },
              {
                span: 8,
                list: [
                  {
                    type: 'select',
                    name: '抵质押方式',
                    icon: 'regular/caret-square-down',
                    options: {
                      defaultValue: '1-抵押',
                      multiple: false,
                      disabled: true,
                      clearable: false,
                      placeholder: '',
                      required: false,
                      showLabel: false,
                      width: '100%',
                      options: [
                        {
                          value: '1-抵押'
                        },
                        {
                          value: '2-质押'
                        }
                      ],
                      remote: false,
                      remoteOptions: [],
                      props: {
                        value: 'value',
                        label: 'label'
                      },
                      remoteFunc: 'func_1542877603000_71973'
                    },
                    key: '1542877603000_71973',
                    model: 'select_1542877603000_71973',
                    rules: []
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542877589000_94111'
            },
            key: '1542877589000_94111',
            model: 'grid_1542877589000_94111',
            rules: []
          },
          {
            type: 'input',
            name: '摘要代码',
            icon: 'regular/keyboard',
            options: {
              width: '26%',
              defaultValue: 'LN001DZY01',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: true,
              clearable: false,
              remoteFunc: 'func_1542877676000_29547'
            },
            key: '1542877676000_29547',
            model: 'input_1542877676000_29547',
            rules: [
              {
                type: 'string',
                message: '单行文本格式不正确'
              }
            ]
          },
          {
            type: 'input',
            name: '摘要',
            icon: 'regular/keyboard',
            options: {
              width: '35%',
              defaultValue: '抵质押',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: true,
              clearable: false,
              remoteFunc: 'func_1542877682000_52731'
            },
            key: '1542877682000_52731',
            model: 'input_1542877682000_52731',
            rules: []
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 8,
                list: [
                  {
                    type: 'date',
                    name: '生效日期',
                    icon: 'regular/calendar-alt',
                    options: {
                      defaultValue: '',
                      readonly: false,
                      disabled: true,
                      editable: true,
                      clearable: true,
                      placeholder: '2018-09-18',
                      startPlaceholder: '',
                      endPlaceholder: '',
                      type: 'date',
                      format: 'yyyy-MM-dd',
                      timestamp: false,
                      required: false,
                      width: '100%',
                      remoteFunc: 'func_1542877650000_80699'
                    },
                    key: '1542877650000_80699',
                    model: 'date_1542877650000_80699',
                    rules: []
                  }
                ]
              },
              {
                span: 8,
                list: [
                  {
                    type: 'date',
                    name: '到期日期',
                    icon: 'regular/calendar-alt',
                    options: {
                      defaultValue: '',
                      readonly: false,
                      disabled: true,
                      editable: true,
                      clearable: true,
                      placeholder: '2020-09-18',
                      startPlaceholder: '',
                      endPlaceholder: '',
                      type: 'date',
                      format: 'yyyy-MM-dd',
                      timestamp: false,
                      required: false,
                      width: '100%',
                      remoteFunc: 'func_1542877653000_65870'
                    },
                    key: '1542877653000_65870',
                    model: 'date_1542877653000_65870',
                    rules: []
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542877647000_4871'
            },
            key: '1542877647000_4871',
            model: 'grid_1542877647000_4871',
            rules: []
          },
          {
            type: 'input',
            name: '出库金额',
            icon: 'regular/keyboard',
            options: {
              width: '26%',
              defaultValue: 'LN001DZY01',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: false,
              clearable: false,
              remoteFunc: 'func_1542877676000_29547'
            },
            key: '1542877676000_29547',
            model: 'input_1542877676000_29547',
            rules: [
              {
                type: 'string',
                message: '单行文本格式不正确'
              }
            ]
          },
          {
            type: 'select',
            name: '抵质押物状态',
            icon: 'regular/caret-square-down',
            options: {
              defaultValue: '1-正常',
              multiple: false,
              disabled: true,
              clearable: false,
              placeholder: '',
              required: false,
              showLabel: false,
              width: '26%',
              options: [
                {
                  value: '1-正常'
                }
              ],
              remote: false,
              remoteOptions: [],
              props: {
                value: 'value',
                label: 'label'
              },
              remoteFunc: 'func_1542879407000_27314'
            },
            key: '1542879407000_27314',
            model: 'select_1542879407000_27314',
            rules: []
          },
          {
            type: 'select',
            name: '出入库类型',
            icon: 'regular/caret-square-down',
            options: {
              defaultValue: '1-临时出库',
              multiple: false,
              disabled: false,
              clearable: false,
              placeholder: '',
              required: false,
              showLabel: false,
              width: '26%',
              options: [
                {
                  value: '1-临时出库'
                },
                {
                  value: '2-结清出库'
                },
                {
                  value: '3-强制出库'
                },
                {
                  value: '4-再回库'
                }
              ],
              remote: false,
              remoteOptions: [],
              props: {
                value: 'value',
                label: 'label'
              },
              remoteFunc: 'func_1542879409000_41552'
            },
            key: '1542879409000_41552',
            model: 'select_1542879409000_41552',
            rules: []
          }
        ],
        config: {
          labelWidth: 100,
          labelPosition: 'right'
        },
        table: {
          showRemove: false,
          showIndexCol: false,
          showEdit: false,
          showExport: false,
          showAdd: false,
          stripe: true,
          border: false
        }
      },
      editData: {},
      values: {},
      remoteFuncs: {}
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm
        .getData()
        .then(data => {
          // 数据校验成功
          // data 为获取的表单数据
        })
        .catch(e => {
          // 数据校验失败
        })
    }
  }
}
</script>

<style scoped>
</style>
